<template>
	<a-space>
		<div
			v-for="(item,index) in imageUrlList"
			:key="index"
			class="image-card bg-white rounded-lg shadow-md overflow-hidden cursor-pointer w-28 h-28"
			@mouseenter="item.isHovered = true"
			@mouseleave="item.isHovered = false"
		>
			<div class="image-container h-28 relative overflow-hidden">
				<img
					:src="item.url"
					class="w-full h-full object-cover transition-transform duration-300"
					:class="{ 'scale-105': item.isHovered }"
				/>

				<!-- 遮罩层 -->
				<div
					class="absolute inset-0 bg-black bg-opacity-30 flex items-center flex-wrap justify-center gap-4 transition-opacity"
					:class="{ 'opacity-100': item.isHovered, 'opacity-0': !item.isHovered }"
				>
					<a-button shape="circle" @click="eyeHandler(item.url)" ghost :icon="h(EyeOutlined)" />
					<a-button shape="circle" @click="deleteHandler(item.id)" danger ghost :icon="h(DeleteOutlined)" />
				</div>
			</div>
		</div>
		<div v-if="imageUrlList.length < count" class="image-card bg-white rounded-lg shadow-md overflow-hidden cursor-pointer w-28 h-28">
			<div class="image-container h-28 relative overflow-hidden">
				<div
					@click="eduImgRef.onOpen()"
					class="border-2 border-dotted border-gray-300 hover:border-blue-500 transition duration-300 w-full h-full bg-gray-50 flex justify-center items-center"
				>
					<PlusOutlined style="font-size: 2em" class="text-stone-500" />
				</div>
			</div>
		</div>

	</a-space>
	<EduImg ref="eduImgRef" :count="allowSelectCount" @successful="handlerSuccess"></EduImg>
	<!--预览-->
	<a-image
		:width="200"
		:style="{ display: 'none' }"
		:preview="{
			visible: visible,
			onVisibleChange: setVisible
		}"
		:src="previewUrl"
	/>
</template>

<script setup>
	import { ref, computed, h } from 'vue'
	import { DeleteOutlined, EditOutlined, EyeOutlined, SearchOutlined } from '@ant-design/icons-vue'
	import EduImg from '@/components/EduImgStock/index.vue'
	import {nanoid} from "nanoid";

	const eduImgRef = ref()
	// 定义 props
	const props = defineProps({
		image: String || Array,
		count: {
			type: Number,
			required: false,
			default: 1
		}
	})

	const imageUrlList = ref([])

	const allowSelectCount = computed(()=>props.count-imageUrlList.value.length)

	// 监听 props 的变化，同步本地值
	watch(
		() => props.image,
		(newVal, oldVal) => {
			console.log('watch', newVal, oldVal)
			if (typeof newVal === 'string' || newVal instanceof String) {
				imageUrlList.value = [{url:newVal,id:nanoid()}]
			} else if (Array.isArray(newVal)) {
				imageUrlList.value = newVal.map(item=>({url:item,id:nanoid()}))
			} else {
				imageUrlList.value = []
			}
			console.log('imageUrlList', imageUrlList.value.length < props.count)
		},
		{ deep: true, immediate: true }
	)

	// 定义事件
	const emit = defineEmits(['update:image'])


	const handlerSuccess = (list) => {
		console.log(list)
		imageUrlList.value =[...imageUrlList.value,... list.map(item=>({url:item,id:nanoid()}))]
		if(imageUrlList.value ===0){
			emit('update:image',"")
		}else if (imageUrlList.value.length === 1) {
			emit('update:image', imageUrlList.value[0].url)
		}else {
			emit('update:image', imageUrlList.value.map(img=>img.url))
		}
	}

	const deleteHandler = (id) => {
		imageUrlList.value = imageUrlList.value.filter(item => item.id !== id)
		if(imageUrlList.value ===0){
			emit('update:image',"")
		}else if (imageUrlList.value.length === 1) {
			emit('update:image', imageUrlList.value[0].url)
		}else {
			emit('update:image', imageUrlList.value.map(img=>img.url))
		}
	}

	// 预览
	const visible = ref(false)
	const previewUrl = ref('')
	const eyeHandler = (url) => {
		visible.value = true
		previewUrl.value = url
	}

	const setVisible = (value) => {
		visible.value = value
	}
</script>

<style scoped>
	.image-card {
		transition: all 0.3s ease;
	}

	.image-container {
		position: relative;
		overflow: hidden;
	}
</style>
